<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>h.264 To fmp4</title>
  <script src="/js/jquery-3.0.0.js"> </script>
  <script type="text/javascript" src="/js/jmuxer.js"></script>

  <style type="text/css" media="screen">
    video.rotate180 {
      width: 100%;
      height: 100%;
      transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      -ms-transform: rotateX(180deg);
    }
  </style>

</head>

<body>
<h2>h.264 To fmp4</h2>
ip:<input type="text" id="ip" name="ip" value="192.168.0.211"/><br/>
prot:<input type="text" id="prot" name="prot" value="8000"/><br/>
user:<input type="text" id="user" name="user" value="admin"/><br/>
password:<input type="text" id="password" name="password" value="Ll123456"/><br/>
channel:<input type="text" id="channel" name="channel" value="1"/><br/>
<button id="loginAndPlayView">登录并预览</button>
<div class="wfsjs">
  <video id="player" style="width: 50%;height: 50%;" autoplay="autoplay" muted></video>
  <div class="ratio"></div>
</div>

<script>
  var jmuxer;
  var mypath = "http://127.0.0.1:10086";

  /**
   * 登录并预览按钮点击：先请求 登录+预览接口，然后返回将返回的lUserID拼接到socket地址后面，创建一个websocket。
   * 然后创建wfs实列 ，执行wfs.attachWebsocket()和wfs.attachMedia(),最后将socket和vide标签绑定给创建的wfs即可
   */
  $("#loginAndPlayView").click(function () {
    var ip = $("#ip").val();
    var prot = $("#prot").val();
    var user = $("#user").val();
    var password = $("#password").val();
    var channel = $("#channel").val();

    var loginVo = {
      "userName": user,    //摄像头登录账号
      "password": password, //摄像头登录账号
      "ip": ip, //摄像头ip
      "prot": prot,  //摄像头端口
      "channel" : channel
    }
    $.ajax({
      type: 'post',
      url: mypath + "/playvision/loginAndPlayView",
      dataType: 'json',
      contentType: "application/json;charset=UTF-8",
      data: JSON.stringify(loginVo),
      xhrFields: { withCredentials: false },
      success: function (res) {
        if (res.code && res.data && res.data.loginStatus == "1") {
          var luserID = res.data.luserID;
          var socketURL = 'ws://127.0.0.1:10086/wstest/'+luserID;
          console.log(socketURL);
          // socketURL = 'ws://127.0.0.1:8080';

          jmuxer = new JMuxer({
            node: 'player',
            mode: 'video',
            flushingTime: 1000,
            fps: 30,
            debug: false,
            onError: function(data) {
              if (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor)) {
                jmuxer.reset();
              }
            }
          });

          var ws = new WebSocket(socketURL);
          ws.binaryType = 'arraybuffer';
          ws.addEventListener('message',function(event) {
            jmuxer.feed({
              video: new Uint8Array(event.data)
            });
          });

          ws.addEventListener('error', function(e) {
            console.log('Socket Error');
          });
        }
        else {
          alert("播放失败，错误信息：" + ((res.data && res.data.loginMessage) ? res.data.loginMessage : ""))
        }
      }
    });
  })
</script>

</body>

</html>